<template>
  <div class="home">
    <overview-nav />
    <div class="app-container">
      <overview-welcome
        :callback="
          () =>
            goTarget(
              'http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/'
            )
        "
        :title="application.projectName"
      />
      <div class="kkmdu5-3 kMWWmc">
        <span>构建完成后通过打开以下链接快速访问你的应用！</span>
        <pre
          class="kkmdu5-0 eJlKYe"
        ><code>http://{{ application.domainName}}.your-domain.com:23456</code></pre>
      </div>

      <div class="kkmdu5-3 kMWWmc">
        <span>打开以下链接进入项目代码仓库，进行版本控制和更改吧！</span>
        <pre
          class="kkmdu5-0 eJlKYe"
        ><code><a :href="application.gitProjectLink" target="_blank" style="color:#005bd5">{{ application.gitProjectLink}}</a></code></pre>
      </div>

      <div class="kkmdu5-3 kMWWmc">
        <span>马上进行开发，通过以下命令提示把代码获取到本地，开始编码！</span>
        <pre class="kkmdu5-0 eJlKYe" style="height:150px">
          <code># 下载工程/安装依赖</code><code>git clone {{ application.gitProjectLink }}</code><code>cd {{ application.projectCode }} &amp;&amp; mvn clean package</code>
        </pre>
      </div>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="WidgetHomeProductMy-detailContainer-3W8nd">
            <h3 class="h3-title">
              <span tooltipicon="help" class="nb-rc-text product-title">
                <span class="the-text">接入引导</span>
              </span>
            </h3>
            <div
              style="
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 212px;
              "
            >
              <div
                style="
                  position: absolute;
                  inset: 0px;
                  overflow: scroll;
                  margin-right: -17px;
                  margin-bottom: -17px;
                "
              >
                <ul class="product_list thm-uglier">
                  <li
                    class="product_list_li"
                    v-for="(item, index) in learnList"
                    :key="index"
                    @click="() => item.nav()"
                  >
                    <div class="text-title">
                      <i :class="item.icon"></i> {{ item.name }}
                    </div>
                    <div class="text-descript">
                      {{ item.desc }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import { applicationDetail } from "@/api/api";

import OverviewNav from "./overviewNav";
import ComponentCreate from "./component/component";
import OverviewWelcome from "./component/welcome";
import { Loading } from "element-ui";

export default {
  name: "index",
  components: {
    OverviewNav,
    ComponentCreate,
    OverviewWelcome,
  },
  created() {
    this.initOverview()
  },
  data() {
    return {
      cicdDialogVisible: true,
      application: {},
      learnList: [
        {
          name: "验证本地环境",
          icon: "fas fa-ambulance",
          desc: "阅读开发手册，学习配置并验证本地环境，通过手册搭建本地开发环境。",
          recommend: true,
          nav: () =>
            this.goTarget(
              "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/11_%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%E9%9B%86%E6%88%90.html"
            ),
        },
        {
          name: "工程版本管理",
          icon: "fab fa-css3-alt",
          desc: "学习配置工程参数，掌握工程结构和开发方式，了解平台底座的通用环境变量和用法。",
          recommend: true,
          nav: () =>
            this.goTarget(
              "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/13_%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E9%9B%86%E6%88%90.html"
            ),
        },
        {
          name: "工程发布构建",
          icon: "fas fa-drafting-compass",
          desc: "学习使用平台的CI/CD套件快速发布和保持项目的持续集成",
          recommend: true,
          nav: () => this.goTarget("http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/18_%E5%A4%9A%E7%A7%8D%E5%8F%91%E5%B8%83%E9%9B%86%E6%88%90.html"),
        },
      ],
    };
  },
  methods: {
    directPath(item) {
      var projectId = this.$route.params.pId;
      console.log("item.path = " + item.path);
    },
    initOverview() {
      var projectId = this.$route.params.pId;

      const loadingService = Loading.service({
        fullscreen: true,
        text: "正在获取生成信息.....",
      });

      applicationDetail(projectId)
        .then((response) => {

          loadingService.close();
          console.log("response = " + response);
          this.application = response.data;

          if (this.application.gitProjectLink) {
            clearInterval(timerId);
            loadingService.close();
          }
        })
        .catch(() => {
          loadingService.close();
        });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/asserts/css/fontawesome.scss";

.homeHeader {
  position: relative;
  box-sizing: border-box;
  padding: 24px 24px 0;
  background-color: #fff;
  box-shadow: 0 1px 0 0 #e3e4e6;
  z-index: 1;
}

.homeHeader h1 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #333;
  line-height: 24px;
}

.app-container {
  background-color: #ffffff;
  max-width: 1240px;
  margin: auto;
}

.widget-title {
  font-size: 14px;
  color: #333;
  line-height: 24px;
  font-weight: 400;
  //    float: left;
  width: 100%;
}

.app-icon {
  width: 32px;
  height: 32px;
  position: relative;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 2px;
  background: #fff;
  padding: 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.el-col-8 {
  width: calc(33.3333333333% - 10px);
  margin-left: 10px;
}

.widget-bulletin-list .item {
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px;

  a {
    color: #555;
  }
}

.product_list_li:nth-child(3),
.product_list_li:nth-child(6) {
  border-right: 0px;
}

.product_list_li {
  width: 33% !important;
  padding: 25px 16px !important ;
  border-radius: 0px !important;

  .text-title {
    font-size: 16px;
    cursor: pointer;
    color: #333;
    letter-spacing: 0;
    line-height: 24px;
  }

  .text-descript {
    margin-top: 8px;
    opacity: 0.7;
    font-size: 12px;
    color: #333;
    letter-spacing: 0.37px;
    line-height: 20px;
  }
}

.widget-bulletin-list {
  .line {
    position: absolute;
    left: -16px;
    right: -16px;
    height: 1px;
    background-color: #e3e4e6;
  }

  .pin {
    position: relative;
    margin-bottom: 15px;
    margin-top: 15px;

    .msg {
      padding: 8px 12px;
      line-height: 18px;
      color: #333;
      font-size: 12px;
      background-color: #eff3f8;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      margin-bottom: 16px;
    }
  }
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.next-col-4 {
  -ms-flex: 0 0 16.66667%;
  -webkit-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  width: 16.66667%;
  max-width: 16.66667%;
  float: left;
}

.subtitle {
  font-weight: 500;
  font-size: 12px;
  color: #666;
  line-height: 20px;
  margin: 16px 0 8px;
}

.thm-uglier {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product_list {
  a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background-color: #f9f9f9;
    width: 100%;
    line-height: 36px;
    text-decoration: none;
    color: #333;
    transition: all 250ms linear;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.product_list > li {
  padding: 0 8px 8px 0;
  overflow: hidden;
  flex: none;
  width: 25%;
  float: left;
  border-radius: 4px;
  font-size: 12px;

  a {
    line-height: 42px;

    i {
      display: none;
      border: 1px solid #dedede;
      border-radius: 14px;
      width: 28px;
      height: 28px;
      text-align: center;
    }
  }

  .WidgetHomeProductMy-product_name-TNtW6 {
    flex: 1;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.h3-title {
  font-size: 17px;
  font-weight: 500;
  margin-top: 10px;
  padding-left: 16px;
}

.text-icons {
  float: right;
  margin-right: 10px;
  font-size: 16px;
  font-weight: 200;
  color: #ccc;
}

li.product_list_li.count-li {
  background: url(https://img.alicdn.com/tfs/TB1uQ8uVLb2gK0jSZK9XXaEgFXa-816-160.png)
    0% 0% / 100% 100% no-repeat;
  width: calc(50% - 16px) !important;
  height: 140px;
  border-right: 0px;
  border-radius: 5px !important;
  margin: 0px 0px 16px 16px !important;
}

.count-text-button > button {
  padding: 0 16px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  background-color: #005bd4;
  border-color: transparent;
  margin-top: 20px;
  color: #fff;
  border-radius: 3px;
}

.kMWWmc {
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 0px 20px;
  font-size: 14px;

  .eJlKYe {
    margin-bottom: 0.75rem;
    align-self: center;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 4px;
    background-color: #f7f9fa;
    color: #333;
    font-family: "SF Mono", "Roboto Mono", Menlo, monospace;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
  }

  .eJlKYe code {
    display: block;
  }
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
  line-height: 26px;
  font-family: unset;
}

span.title-tips {
  font-size: 12px;
  border: 1px solid #f25643;
  font-weight: 400;
  padding: 0px 4px;
  border-radius: 3px;
  color: #f25643;
  position: absolute;
  margin-left: 5px;
  height: 24px;
  line-height: 24px;
}
</style>


